import React, { CSSProperties } from "react";
import { Component } from "react";

interface MultiStateButtonProps {
  normal: string;
  hover?: string;
  press?: string;
  style: CSSProperties;
}

class MultiStateButton extends Component<MultiStateButtonProps, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      url: props.normal,
    };
  }

  render() {
    return (
      <img
        style={this.props.style}
        onPointerEnter={() =>
          this.setState({ url: this.props.hover || this.props.normal })
        }
        onPointerOut={() => this.setState({ url: this.props.normal })}
        onPointerDown={() =>
          this.setState({ url: this.props.press || this.props.normal })
        }
        onPointerUp={() => this.setState({ url: this.props.hover })}
        src={this.state.url}
      ></img>
    );
  }
}

export default MultiStateButton;